// 这个是政策界面的详情
<script setup>
import { ref, onMounted, reactive } from "vue-demi";
import store from "../../store";
store.sendPolicy();
console.log(
  window.localStorage.getItem("policy"),
  "policy",
  typeof window.localStorage.getItem("policy")
);
const s = window.localStorage.getItem("policy");

let s2 = JSON.parse(s);
console.log(s2, "字符串转对象");
console.log(s2.policyType, "对象取值");
const dataArr = ref([]);
let obj = ref({});
var timeformat = function (shijianchuo) {
  var time = new Date(shijianchuo * 1);
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  return y + "-" + m + "-" + d;
};

function skipBack() {
  window.location.replace("../Home/Home.html");
  // window.history.back();
  console.log(2);
}

function filterDate(val) {
  // return val.replaceAll('\n' , '<br/>')
  console.log("22222", val);
}
let index = localStorage.getItem("index");
const suo = ref(index);
let bulk = ref("");
onMounted(() => {
  window.onbeforeunload = function (e) {
    window.localStorage.removeItem("policytype");
    console.log("ook");
  };
  bulk.value = s2.bulk.split("\n");
  console.log(bulk, "aftersplit");
  bulk.value = bulk.value.map((item) => {
    return `<p>${item}</p>`;
  });
  // console.log("bbuullkk1", bulk);

  bulk.value = bulk.value.join("");
  console.log("bbuullkk", bulk.value);
  // });
  // var par = new Array();
});
</script>

<template>
  <div class="back" @click="skipBack">
    <img style="width: 20px" src="../../assets/箭头-左.png" alt="" />
  </div>
  <div class="titou">详情</div>
  <div class="title">{{ s2.theme }}</div>

  <div class="time">
    <div class="left">
      <span class="weight">时间：</span>{{ timeformat(s2.timeStamp) }}
    </div>
    <div class="right"><span class="weight">来源：</span>{{ s2.source }}</div>
  </div>
  <div class="content" v-html="bulk"></div>
  <div class="img"><img style="width: 100%" :src="s2.pic" alt="" /></div>
  <div class="foot">
    <div class="wz">原网址：</div>
    {{ s2.webLink }}
  </div>
</template>

<style>
body {
  max-width: 100%;
  overflow-x: hidden;
}
.title {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  font-weight: bold;
}

.content {
  padding: 10px 20px;
  font-size: 12px;
  line-height: 2;
  white-space: pre-line;
  text-indent: 24px;
}

p {
  margin: 0;
}
.foot {
  bottom: 20px;
  font-size: 10px;
  color: #414141;
}
.wz {
  display: inline-block;
  color: #414141;
  font-weight: 600;
}

.titou {
  position: absolute;
  top: 12px;
  font-size: 16px;
  color: #414141;
  left: calc(50% - 16px);
}

.time {
  display: flex;
  font-size: 12px;
  padding: 4px 20px;
  border-bottom: 1px solid #ccc;
  color: #666;
}

.left {
  margin-right: 10px;
}

.back {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background-color: brown;
  text-align: center;
  overflow: hidden;
}

.img {
  padding: 4px 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.img > img {
  border-radius: 10px;
}

.back > img {
  margin-top: 5px;
}

.weight {
  font-weight: bold;
}
</style>
